<template>
	<view class="container">
		<!-- 提现 -->
		<view class="tixian">
			<view class="tixian2">
				<view class="tixian1">
				<text>{{userinfo.usdt}} USDT</text>
				<text class="tixian3">{{$t('tixian.yuer')}}</text>
			</view>
			<view class="tixian1">
				<text>{{userinfo.xgt}} XGT</text>
				<text class="tixian3">{{$t('tixian.yuer')}}</text>
			</view>
			</view>
			
			<view class="tiixananniu" @click="gotixian">
				<text>{{$t('tixian.tixian')}}</text>
			</view>
		</view>
		<!-- 弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="tankuan">
				<view class="tankuan1">
					<image @click="guanbi" class="tankuan1-img" src="/static/icon/guanbi.png" mode=""></image>
				</view>
				<view class="tankuan2">
					<text>{{$t('tixian.yuer')}}:{{userinfo.usdt}}USDT</text>
				</view>
				<view class="tankuan3">
					<input type="number" v-model="money" @input="onKeyInput" placeholder-style="color:#fff"
						placeholder="请输入" />
				</view>
				<view class="tankuan4">
					<text>{{$t('duihuan.shouxu')}}:{{fee.toFixed(3)}} XGT</text>
				</view>
				<view class="tankuan5" @click="gtetixian">
					<text>{{$t('tixian.tixian')}}</text>
				</view>
			</view>
		</uni-popup>
		<!-- 记录 -->
		<view class="jilu">
			<view class="jilu1">
				<z-tabs :list="tabList" @change="tabsChange" inactive-color="#fff" active-color="#fff"
					bg-color="#001d57" />
			</view>

			<z-paging ref="paging" v-model="dataList" use-page-scroll :auto-show-back-to-top="true"
				:showRefresherUpdateTime="true" @query="queryList">
				<view class="jilu2" v-for="(item,index) in dataList">
					<view class="jilu3">
						<view class="jilu4">
							<text class="jilu4-tixian">提现</text>
							<text class="jilu4-date">{{item.datetime}}</text>
						</view>
						<view class="jilu5">
							<text class="jilu5-1" v-show="item.state==0">审核中</text>
							<text class="jilu5-2" v-show="item.state==1">已同意</text>
							<text class="jilu5-3" v-show="item.state==2">已拒绝</text>
							<text>-{{item.money}}</text>
						</view>
					</view>
				</view>

			</z-paging>
		</view>

	</view>
</template>

<script>
	import {
		Debounce
	} from "@/api/debounce.js"; //防抖
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		mixins: [ZPMixin],
		data() {
			return {
				tabList: [ this.$t('tixian.tixianjilu')],
				tabIndex: 0,
				dataList: [],
				money: '',
				fee: 0,
				newmoney:'',//今日利率
				userinfo: {},
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('tixians'), // 必填，页面标题）
			})
			this.newmoney=uni.getStorageSync('newmoney')
			this.getuserinfo()
		},
		methods: {
			// 打开弹框
			gotixian() {
				this.$refs.popup.open('center')
			},
			// 关闭弹框
			guanbi() {
				this.$refs.popup.close()
			},
			onKeyInput: function(event) {
				this.money = event.target.value
					this.fee=this.money*0.1/this.newmoney
				// console.log('打印money',this.fee);
				
			},
			// 提现
			gtetixian:Debounce(function(){
				if(this.money<10){
					this.$modal.msg(this.$t('msg.error9'))
					return
				}else if(this.money>this.userinfo.usdt){
					this.$modal.msg(this.$t('msg.error1'))
					return
				}
				let data = {
					money:this.money
				}
				let opts = {
					url: '/user/Addtx',
					method: 'POST'
				};
				// console.log('打印入参',data);
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('提现', res);
					if (res[1].data.state == 'success') {
						this.$modal.msg(res[1].data.msg)
						this.getuserinfo()
						this.$refs.popup.close()
				
					}else{
						this.$modal.msg(res[1].data.msg)
					}
				
				})
			},1000),
			// 获取个人资料
			getuserinfo() {
				let data = {}
				let opts = {
					url: '/user/GetUserInfo',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('个人资料', res);
					if (res[1].data.state == 'success') {
						this.userinfo = res[1].data.list[0]

					}

				})
			},
			tabsChange(index) {
				this.tabIndex = index;
				// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				// this.$refs.paging.reload();
			},
			// 列表
			queryList(pageNo, pageSize) {
				let data = {
					yema:pageNo,
					yezhi:pageSize
				}
				let opts = {
					url: '/user/Gettxlist',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('提现列表', res);
					if (res[1].data.state == 'success') {
				this.$refs.paging.complete(res[1].data.list)
					}
				
				})
				

			},
		},
	}
</script>

<style>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tixian {
		width: 84%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		/* background-color: #1b2587; */
		border: 1rpx solid #cee8fc;
		margin-top: 30rpx;
	}

	.tixian1 {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 38rpx;
		font-weight: 700;
	}
	.tixian2{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}


	.tixian3 {
		font-size: 26rpx;
		font-weight: 500;
	}

	.tiixananniu {
		width: 260rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: #1b2587; */
		border: 1rpx solid #cee8fc;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}

	.jilu {
		width: 94%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		border-radius: 20rpx;
		border-radius: 10rpx;
		/* background-color: #1b2587; */
		border: 1rpx solid #cee8fc;
	}

	.jilu1 {
		width: 100%;

	}

	.jilu2 {
		width: 640rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		border-bottom: 1rpx solid #32356d;
	}

	.jilu3 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

	}

	.jilu4 {
		display: flex;
		flex-direction: column;
	}

	.jilu4-tixian {
		font-size: 28rpx;
		font-weight: 700;
	}

	.jilu4-date {
		font-size: 24rpx;
		margin-top: 15rpx;
		color: #a1a1a1;
	}

	.jilu5 {
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		font-weight: 700;
	}
	.jilu5-1{
		font-size: 26rpx;
		color: #00aaff;
	}
	.jilu5-2{
		font-size: 26rpx;
		color: #00aa00;
	}
	.jilu5-3{
		font-size: 26rpx;
		color: #ff0000;
	}

	.jilu5-jia {
		color: #4b50a4;
	}

	/* 弹框 */
	.tankuan {
		width: 480rpx;
		height: 400rpx;
		border-radius: 20rpx;
		background-color: #434357;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}

	.tankuan1 {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tankuan1-img {
		width: 40rpx;
		height: 40rpx;
	}

	.tankuan2 {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-weight: 700;
	}

	.tankuan3 {
		width: 90%;
		padding: 20rpx;
		background-color: #5c5c5c;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.tankuan4 {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.tankuan5 {
		width: 320rpx;
		height: 80rpx;
		background-color: #555cba;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}
</style>